<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/static/css/hw-admin.css">
    <link rel="stylesheet" href="/static/css/lb.css"> 
    <link rel="stylesheet" href="/static/css/indexmain.css">
    <link rel="stylesheet" href="/static/css/table.css">
    <style>
    .input-icon-group input{
        width:200px;
    }
    .hw-nav-tabs li.active {
        border-bottom-color: #EFF3F5;
    }
    .main-table-wrap222{
        padding:20px;
    }
    .img-tb {
        
    }
    .c-top a.red,.c-bot a.red {
        color: #E73E3A;
    }
    .c-bot a,.c-top a{
        color: #BFBFBF;
    }
    </style>
</head>

<body>
    <!-- 主体部分开始 -->
    <div class="hw-iframe" style="background: #EFF3F5;">
        
        <!-- 顶部标题 -->
        <!-- <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    首页
                </div> 
            </div>
        </div> -->
        <div class="tab-wrap">
            <ul class="hw-nav-tabs">
            <a href="<?=base_url().'Admin/Index/indexmain?status=1'?>">
                <li <?=(!isset($_GET['status']))||(isset($_GET['status'])&&$_GET['status']==1)?'class="active"':''?>  data-toggle="tab" data-target="#base-info">用户属性</li>
            </a>
            <a href="<?=base_url().'Admin/Index/indexmain?status=2'?>">
                <li <?=isset($_GET['status'])&&$_GET['status']==2?'class="active"':''?> data-toggle="tab"  data-target="#account-info">用户增长</li>
            </a>
            </ul>
        </div>
        <div class="hw-ly hw-group" <?=(!isset($_GET['status']))||(isset($_GET['status'])&&$_GET['status']==1)?'':'style="display: none;"'?>>
        <main style="background: #EFF3F5 !important;">
            <div class="main-top" style="position: relative;z-index: 1;" >
                <ul>
                    <li>
                        <div class="tp">
                            <i class="iconfont tree">&#xe602;</i>
                            <p><?=isset($num['total'])?$num['total']:0?></p>
                            <span>总会员数量</span>
                        </div>
                        <a href="/Admin/Member/memberList">
                            <div class="bt">
                                <span>查看更多</span>
                                <i class="iconfont more">&#xe87a;</i>
                            </div>
                        </a>
                    </li>
                    <li>
                        <div class="tp">
                            <i class="iconfont tree">&#xe88c;</i>
                            <p><?=isset($num['check'])?$num['check']:0?></p>
                            <span>已认证会员数量</span>
                        </div>
                        <a href="/Admin/Member/memberList?state=3">
                            <div class="bt">
                                <span>查看更多</span>
                                <i class="iconfont more">&#xe87a;</i>
                            </div>
                        </a>
                    </li>
                    <li>
                        <div class="tp">
                            <i class="iconfont tree">&#xe88d;</i>
                            <p><?=isset($num['register'])?$num['register']:0?></p>
                            <span>已注册会员数量</span>
                        </div>
                        <a href="/Admin/Member/memberList?state=2">
                            <div class="bt">
                                <span>查看更多</span>
                                <i class="iconfont more">&#xe87a;</i>
                            </div>
                        </a>
                    </li>
                    <li>
                        <div class="tp">
                            <i class="iconfont tree">&#xe602;</i>
                            <p><?=isset($num['author'])?$num['author']:0?></p>
                            <span>已授权会员数量</span>
                        </div>
                        <a href="/Admin/Member/memberList?state=1">
                        <div class="bt">
                            <span>查看更多</span>
                            <i class="iconfont more">&#xe87a;</i>
                        </div>
                        </a>
                    </li>
                </ul>
            </div>
        </main>
        <div class="statistical group-info">
            <div class="source">
                <div class="title">用户来源占比统计图</div>
                <div class="content_one secharts-one"></div>
            </div>
            <div class="occupation">
                <div class="group-item">
                    <div class="hw-input-label short">
                        <div class="name">用户类型占比统计图</div>
                        <div class="form-control" style="flex: 1;">
                            <label class="hw-select ly-select" data-kk="1" style="float: right;margin-right: 15px;">
                                <input class="hw-input" name="trade" type="text" value="" readonly="" unselectable="on">
                                <div class="select-options ly-options">
                                    <div class="option selected" data-value=""><span>全部</span><i class="iconfont">&#xe649;</i></div>
                                    <div class="option" data-value="1"><span>机器用户</span><i class="iconfont">&#xe649;</i></div>
                                    <div class="option" data-value="2"><span>通用二维码用户</span><i class="iconfont">&#xe649;</i></div>
                                </div>
                            <div class="show-option">全部</div><i class="iconfont"></i></label>
                        </div>
                    </div>
                </div>
                <div class="content_two secharts-two"></div>
            </div>
        </div>
            <div class="hotel_rank_one">
                <div class="title"><span>酒店机器认证用户量排行</span><span><a href="/Admin/HotelCount/hcountList">查看更多</a></span></div>
                <div class="table-content">
                    <div class="main-table-wrap">
                        <form method="POST" action="">
                            <table cellspacing="0" cellpadding="0" border="0">  
                                <colgroup>
                                    <col class="col-3">
                                    <col class="col-8">
                                    <col class="col-8">
                                    <col class="col-6">
                                    <col class="col-7">
                                    <col class="col-7">
                                </colgroup>

                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>酒店名称</th>
                                        <th>所在地区</th>
                                        <th>部署机器数量</th>
                                        <th class="img-tb">
                                            认证用户数量
                                            <span class="c-top"><a <? if(isset($_GET['credUser']) && $_GET['credUser'] == 1){echo 'class="red"';}?> href="<?='/Admin/Index/indexmain?credUser=1'?>"><i class="iconfont">&#xe682;</i></a></span><span class="c-bot"><a <? if(isset($_GET['credUser']) && $_GET['credUser'] == 2){echo 'class="red"';}?> href="<?=base_url().'Admin/Index/indexmain?credUser=2'?>"><i class="iconfont">&#xe681;</i></a></span>
                                        </th>
                                        <th class="img-tb">
                                            授权用户数量
                                            <span class="c-top"><a <? if(isset($_GET['authUser']) && $_GET['authUser'] == 1){echo 'class="red"';}?> href="<?=base_url().'Admin/Index/indexmain?authUser=1'?>"><i class="iconfont">&#xe682;</i></a></span><span class="c-bot"><a <? if(isset($_GET['authUser']) && $_GET['authUser'] == 2){echo 'class="red"';}?> href="<?=base_url().'Admin/Index/indexmain?authUser=2'?>"><i class="iconfont">&#xe681;</i></a></span>
                                        </th>
                                    </tr>
                                </thead>
                                
                                <tbody>
                                <?php if(isset($rank) && count($rank)!=0) { foreach ($rank as $key => $value) {
                                    ?>
                                    <tr>
                                        <td><?=$key+1?></td>
                                        <td><?=isset($value['name'])?$value['name']:''?></td>
                                        <td><?=isset($value['address'])?$value['address']:''?></td>
                                        <td><?=isset($value['kiosks'])?$value['kiosks']:''?></td>
                                        <td><?=isset($value['cred'])?$value['cred']:''?></td>
                                        <td><?=isset($value['auth'])?$value['auth']:''?></td>
                                    </tr> 
                                <?php
                                }}?>
                                </tbody>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="conversion">
                <div class="title">
                    <span>酒店机器认证用户转化率统计</span>
                    <div class="hw-filter-wrapper">
                        <div class="hw-filter">
                            <form method="GET" action="">
                                <div class="filter-detail">
                                    <div class="filter-item">
                                    
                                        <div class="hw-input-label">
                                            <label class="name" for="">选择日期</label>
                                            <div class="input-icon-group">
                                                <input type="text" id="startime" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'endtime\',{d: -1})||\'%y-%M-{%d-1}\'}'})" placeholder="选择日期" value="<?=date('Y-m-d', strtotime('-1 month'))?>">
                                                <div class="icon-wrapper">
                                                    <i class="iconfont">&#xe601;</i>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="hw-input-label">
                                            <label class="name" for="" style="width: 17px;text-align: center;padding-left: 0px;">至</label>
                                            <div class="input-icon-group">
                                                <input type="text" id="endtime" onclick="WdatePicker({minDate:'#F{$dp.$D(\'startime\',{d:1});}',maxDate: '%y-%M-{%d-1}'})"  placeholder="选择日期" name="end_time" value="<?=date('Y-m-d', strtotime('-1 day'))?>" placeholder="选择日期">
                                                <div class="icon-wrapper">
                                                    <i class="iconfont">&#xe601;</i>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="group-item">
                                            <div class="hw-input-label short">
                                                <div class="name">选择酒店</div>
                                                <div class="form-control">
                                                    <label class="hw-select">
                                                        <input class="hw-input" name="trade" type="text" value="" readonly="" unselectable="on">
                                                        <div class="select-options ly-hotel ll-options">
                                                            <div class="option selected" data-value=""><span>全部</span><i class="iconfont">&#xe649;</i></div>
                                                            <?php if(isset($hotel) && count($hotel)!=0){
                                                foreach ($hotel as $key => $value) {
                                                    ?>
                                                            <div class="option" data-value="<?=$value['id']?>"><span><?=isset($value['name'])?$value['name']:''?></span><i class="iconfont">&#xe649;</i></div>
                                                            <?php }}?>
                                                        </div>
                                                    <div class="show-option" style="padding-right: 26px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">全部</div><i class="iconfont"></i></label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="operate-btns">
                                            <div class="hw-btn search"><i class="iconfont">&#xe9df;</i>查询</div>
                                        </div>
                                        
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="num-one">
                        <div class="num-title"><span>1</span>机器自助办理入住用户量</div>
                        <div class="data zbox">
                            <div class="border"></div><div style="width: <?php if(isset($convension['user']) && $convension['user'] != 0){echo '500px';}else{echo '0px';}?>" class="border-blue"></div><span><?=isset($convension['user'])?$convension['user']:0?>人</span>
                        </div>
                    </div>

                    <div class="num-two">
                    <?php if (isset($convension) && count($convension)!=0 && $convension['user']!=0){
                            $percent = ($convension['author'] / $convension['user']);
                        }?>
                        <div class="num-title"><span>2</span>机器授权用户数量<i class="onebl"><?=isset($percent)?sprintf("%.2f",$percent*100).'%':''?></i></div>
                        <div class="data zboxone">
                        
                            <div class="border"></div><div style="width: <?=isset($percent)?$percent*500:''?>px" class="border-blue"></div><span><?=isset($convension['author'])?$convension['author']:0?>人</span>
                        </div>
                    </div>
                    <div class="num-three">
                    <?php if (isset($convension) && count($convension)!=0 && $convension['user']!=0){
                            $percent = ($convension['check'] / $convension['user']);
                        }?>
                        <div class="num-title"><span>3</span>机器认证用户数量<i class="twobl"><?=isset($percent)?sprintf("%.2f",$percent*100).'%':''?></i></div>
                        <div class="data zboxtwo">
                        
                        
                            <div class="border"></div><div style="width: <?=isset($percent)?$percent*500:''?>px" class="border-blue"></div><span><?=isset($convension['check'])?$convension['check']:0?>人</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       
        <div <?=isset($_GET['status'])&&$_GET['status']==2?'':'style="display: none;"'?> class="hw-group zz">
           <div style="background:#fff;">
                <div class="tabletitle" style="background: #fff;margin-bottom:20px;">
                    <div class="zh">
                        <span>昨日关键指标</span>
                        <i></i>
                    </div>
                </div>
                <div class="percent"  style="background: #fff;padding-bottom:20px;">
                    <div class="percent_item">
                        <span>机器认证用户新增</span>
                        <i><?=isset($target['machine'])?$target['machine']:0?></i>
                    </div>
                    <div class="percent_line"></div>
                    <div class="percent_item">
                        <span>通用码认证用户新增</span>
                        <i><?=isset($target['qrCode'])?$target['qrCode']:0?></i>
                    </div>           
                    <div class="percent_line"></div>
                    <div class="percent_item">
                        <span>累积认证用户数量</span>
                        <i><?=isset($target['all'])?$target['all']:0?></i>
                    </div>          
                </div>
            </div>
            <div class="tabletitle"  style="background: #fff;margin-top: 20px;">
                        <div style="border-bottom:1px solid #e6e6e6;width:100%;background:#fff;padding:0;" class="tabletitle">
                        <span>会员新增趋势图</span>
                        <div style="display:flex;">
                            <div style="display:flex;">
                                <div class="hw-input-label">
                                    <label class="name" for="">选择日期</label>
                                    <div class="input-icon-group">
                                        <input type="text" id="startmember" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'endmember\',{d:-1})||\'%y-%M-{%d-1}\'}',minDate:'%y-%M-{%d-31}'})" placeholder="选择日期" name="start_time" value="<?=date('Y-m-d', strtotime('-1 month'))?>"  autocomplete="off" disableautocomplete>
                                        <div class="icon-wrapper">
                                            <i class="iconfont">&#xe601;</i>
                                        </div>
                                    </div>
                                </div>
                                <div class="hw-input-label">
                                    <label class="name" for="" style="width: 34px;text-align: center;">至</label>
                                    <div class="input-icon-group">
                                        <input type="text" id="endmember" onclick="WdatePicker({minDate:'#F{$dp.$D(\'startmember\',{d:+1})||\'%y-%M-{%d-31}\'}',maxDate:'%y-%M-{%d-1}'})" placeholder="选择日期" name="end_time" value="<?=date('Y-m-d', strtotime('-1 day'))?>"  autocomplete="off" disableautocomplete>
                                        <div class="icon-wrapper">
                                            <i class="iconfont">&#xe601;</i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hw-input-label" style="">
                                <div class="name">选择酒店</div>
                                <div class="form-control" style="width: 200px;">
                                <label class="hw-select" style="width: 200px;"> 
                                        <div class="select-options hotelselet ll-options">
                                            <div class="option"  data-value=""><span>全部</span><i class="iconfont">&#xe649;</i></div>
                                            <?php if(isset($hotel) && count($hotel)!=0){
                                                foreach ($hotel as $key => $value) {
                                                    ?>
                                            <div class="option"  data-value="<?=$value['id']?>"><span><?=$value['name']?></span><i class="iconfont">&#xe649;</i></div>
                                            <?php
                                                }
                                            }?>
                                        </div>
                                        <div class="show-option">全部</div><i class="iconfont">&#xe619;</i>
                                        <input class="hw-input" name="hotel" type="text" value="" readonly="" unselectable="on" >
                                </label>
                                </div>
                            </div>
                            <div class="operate-btns">
                                <button class="hw-btn echartsearch"><i class="iconfont">&#xe9df;</i>查询</button>
                            </div>
                            </div>
                    </div>

            </div>
            <div  class="summary-chart" style="background: #fff;" id="distributbox">
                <!-- <div class="summary-title">机构分类统计</div> -->
                <div class="summary-chart-lists row" id="distributChart" style="height:500px;width:1000px;margin:0 auto;">
                </div>
            </div>
            <div   style="background: #fff;margin-top: 14px;" class="tabletitle">
                        <div style="border-bottom:1px solid #e6e6e6;width:100%;background:#fff;padding:0;" class="tabletitle">
                            <span>会员增量统计表</span>
                  
                        <div style="display:flex;">
                            <div style="display:flex;">
                                <div class="hw-input-label">
                                    <label class="name" for="">选择日期</label>
                                    <div class="input-icon-group">
                                        <input type="text" id="star_time" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'end_time\',{d:-1})||\'%y-%M-{%d-1}\'}',minDate:'%y-%M-{%d-31}'})" placeholder="选择日期" name="start_time" value="<?=date('Y-m-d', strtotime('-10 day'))?>"  autocomplete="off" disableautocomplete>
                                        <div class="icon-wrapper">
                                            <i class="iconfont">&#xe601;</i>
                                        </div>
                                    </div>
                                </div>
                                <div class="hw-input-label">
                                    <label class="name" for="" style="width: 34px;text-align: center;">至</label>
                                    <div class="input-icon-group">
                                        <input type="text" id="end_time" onclick="WdatePicker({minDate:'#F{$dp.$D(\'star_time\',{d:+1})||\'%y-%M-{%d-31}\'}',maxDate:'%y-%M-{%d-1}'})" placeholder="选择日期" name="end_time" value="<?=date('Y-m-d', strtotime('-1 day'))?>"  autocomplete="off" disableautocomplete>
                                        <div class="icon-wrapper">
                                            <i class="iconfont">&#xe601;</i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="operate-btns">
                                <button class="hw-btn tableserach"><i class="iconfont">&#xe9df;</i>查询</button>
                            </div>
                         </div>
                    </div>
            </div>
            <div class="main-table-wrap main-table-wrap222" style="background: #fff;">
                    <form id="table-form" method="post" action="/Admin/Member/batchExport">
                    <input type="hidden" value="" name="id" id="exportid">
                        <table cellspacing="0" cellpadding="0" border="0" id="first-table">  
                            <colgroup> 
                                <col class="col-2">
                                <col class="col-9">
                                <col class="col-6">
                                <col class="col-5"> 
                                <col class="col-6">
                                <col class="col-6">
                                <col class="col-6">                                
                            </colgroup>
                            <thead>
                                <tr> 
                                    <th>日期</th>                            
                                    <th>新增认证用户量</th>   
                                    <th>累积认证用户量</th>
                                    <th>新增注册用户量</th>  
                                    <th>新增授权用户量</th>
                                </tr>
                            </thead>
                            <tbody class="memberrasietable">
                            <?php if (isset($table) && count($table)!=0) {ksort($table);
                                foreach ($table as $key => $value) {
                                    ?>
                                    <tr>  
                                        <td><?=$value['date']?></td>
                                        <td><?=$value['cred']?></td>
                                        <td><?=$value['total_cred']?></td>
                                        <td><?=$value['register']?></td>
                                        <td><?=$value['auth']?></td>
                                    </tr>
                            <?php
                                }
                            }?>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>


    </div>
    <!-- 主体部分结束 -->
</body>
    
    <script src="/static/lib/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/static/lib/My97DatePicker/WdatePicker.js"></script>
    <script src="/static/lib/echarts.js"></script>
    <script type="text/javascript" src="/static/lib/jquery.form.min.js"></script>
    <script type="text/javascript" src="/static/js/common/util.js"></script>
    <script type="text/javascript" src="/static/js/common/upload.js"></script>
    <script type="text/javascript" src="/static/lib/jquery.validate.js"></script>
    <script type="text/javascript" src="/static/lib/messages_zh.js"></script>
    <script type="text/javascript" src="/static/js/common/validateExtend.js"></script>

    <script>

        var machine = <?=isset($num['machine'])?$num['machine']:0?>;  //机器用户量
        var qrCode = <?=isset($num['QRcode'])?$num['QRcode']:0?>;     //通用二维码
        var check = <?=isset($num['check'])?$num['check']:0?>;        //认证用户
        var register = <?=isset($num['register'])?$num['register']:0?>;//注册用户
        var author = <?=isset($num['author'])?$num['author']:0?>;      //授权用户
        var Csline1Option = {
            legend: {
                orient: 'horizontal',
                x: 'left',
                bottom: '20',
                left: '30%',
                data:['机器用户量','通用二维码用户量']
            },
            tooltip : {
                trigger: 'item',
                //   formatter: '{a}<br/> {b} : {c} ({d}%)',
                formatter: '{a}<br/> {b} : {c} ({d}%)',
                // formatter:  function(name){
                //         // var data = [
                //         //     {value:253, name: '累积用户数量',itemStyle: {color: '#2496EC'}},
                //         //     {value:163, name:'累积用户数量',itemStyle: {color: '#AEDCAE'}},
                //         // ];
                //         console.log(name)
                //         var total = 0;
                //         var target;
                //         for (var i = 0, l = name.data.length; i < l; i++) {
                //             total += name.data[i].value;
                //             if (data[i].name == name) {
                //             target = data[i].value;
                //             }
                //         }
                //         var arr = [
                //             '{a|'+((target/total)*100).toFixed(2)+'%}',
                //             '{b|'+name+'}',
                //         ]
                //         // return name + ' ' + ((target/total)*100).toFixed(2) + '%';
                //         return arr.join('\n')
                //     },
            },
    
            series: [{
                    name:'累计用户数量',
                    type:'pie',
                    center: ['50%', '40%'],
                    radius: ['0%', '60%'],
                    data:[
                        {value:<?=isset($num['machine'])?$num['machine']:0?>, name: '机器用户量',itemStyle: {color: '#2496EC'}},
                        {value:<?=isset($num['QRcode'])?$num['QRcode']:0?>, name:'通用二维码用户量',itemStyle: {color: '#AEDCAE'}},
                    ],
                    label: {
                        normal: {
                                // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}\n{c} {per|{d}%}  ',
                                formatter: '{per|{d}%}',
                                position: 'inner',
                                rich: {
                                    a: {
                                        color: '#000',
                                        lineHeight: 18,
                                        align: 'center',
                                        fontSize: 12,
                                    },
                                    c: {
                                        color: '#000',
                                        fontSize: 12,
                                        lineHeight: 33
                                    },
                                
                                    b: {
                                        color: '#000',
                                        fontSize: 12,
                                        lineHeight: 33
                                    },
                                    
                                    per: {
                                        fontSize: 12,
                                        color: '#000',
                                        padding: [2, 10],
                                    }
                                }
                        }
                    }        
            }],
        }; 
        var Csline2Option = {
            legend: {
                orient: 'horizontal',
                x: 'left',
                bottom: '20',
                left: '25%',
                data:['认证用户','注册用户','授权用户']
            },
            tooltip : {
                trigger: 'item',
                // formatter: "{b} : {c} ({d}%)"
                formatter: '{a}<br/> {b} : {c} ({d}%)',
            },
            
            series: [{
                    name:'累计用户数量',
                    type:'pie',
                    center: ['50%', '40%'],
                    radius: ['0%', '60%'],
                    data:[
                        {value:<?=isset($num['check'])?$num['check']:0?>, name: '认证用户',itemStyle: {color: '#2496EC'}},
                        {value:<?=isset($num['register'])?$num['register']:0?>, name:'注册用户',itemStyle: {color: '#AEDCAE'}},
                        {value:<?=isset($num['author'])?$num['author']:0?>, name:'授权用户',itemStyle: {color: '#F29895'}},
                    ],
                    label: {
                        normal: {
                            // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}\n{c} {per|{d}%}  ',
                            formatter: '{per|{d}%}',
                            position: 'inner',
                                rich: {
                                    a: {
                                        color: '#000',
                                        align: 'center',
                                        fontSize: 12,
                                    },
                                    c: {
                                        color: '#000',
                                        fontSize: 12,
                                        lineHeight: 33
                                    },
                                
                                    b: {
                                        color: '#000',
                                        fontSize: 12,
                                        lineHeight: 33
                                    },
                                    
                                    per: {
                                        fontSize: 12,
                                        color: '#000',
                                        padding: [2, 10],
                                    }
                                }
                        }
                    }        
            }],
        };
        var Csline3Option = {
            legend: {
                orient: 'horizontal',
                x: 'left',
                bottom: '20',
                left: '30%',
                data:['机器用户量','通用二维码用户量']
            },
            tooltip : {
                trigger: 'item',
                // formatter: "{b} : {c} ({d}%)"
                formatter: '{a}<br/> {b} : {c} ({d}%)',
                // formatter:  function(name){
                //         // var data = [
                //         //     {value:253, name: '累积用户数量',itemStyle: {color: '#2496EC'}},
                //         //     {value:163, name:'累积用户数量',itemStyle: {color: '#AEDCAE'}},
                //         // ];
                //         console.log(name)
                //         var total = 0;
                //         var target;
                //         for (var i = 0, l = name.data.length; i < l; i++) {
                //             total += name.data[i].value;
                //             if (data[i].name == name) {
                //             target = data[i].value;
                //             }
                //         }
                //         var arr = [
                //             '{a|'+((target/total)*100).toFixed(2)+'%}',
                //             '{b|'+name+'}',
                //         ]
                //         // return name + ' ' + ((target/total)*100).toFixed(2) + '%';
                //         return arr.join('\n')
                //     },
            },
            series: [{
                    name:'累计用户数量',
                    type:'pie',
                    center: ['50%', '40%'],
                    radius: ['0%', '70%'],
                    data:[
                        {value:<?=isset($num['machine'])?$num['machine']:0?>, name: '机器用户量',itemStyle: {color: '#2496EC'}},
                        {value:<?=isset($num['QRcode'])?$num['QRcode']:0?>, name:'通用二维码用户量',itemStyle: {color: '#AEDCAE'}},
                    ],
                    label: {
                        normal: {
                                // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                formatter: '{per|{d}%}',
                                position: 'inner',
                                rich: {
                                    a: {
                                        color: '#000',
                                        lineHeight: 1,
                                        align: 'center',
                                        fontSize: 12,
                                    },
                                    c: {
                                        color: '#000',
                                        fontSize: 12,
                                        lineHeight: 33
                                    },
                                
                                    b: {
                                        color: '#000',
                                        fontSize: 12,
                                        lineHeight: 33
                                    },
                                    
                                    per: {
                                        fontSize: 12,
                                        color: '#000',
                                        padding: [2, 4],
                                    }
                                }
                        }
                    }        
            }],
    
        };
        var Csline4Option = {
            legend: {
                orient: 'horizontal',
                x: 'left',
                bottom: '20',
                left: '35%',
                data:['认证用户','注册用户','授权用户']
            },
            tooltip : {
                trigger: 'item',
                // formatter: '{a}<br/> {b} : {c} ({d}%)',
                formatter: '{a}<br/> {b} : {c} ({d}%)',
            },
            series: [{
                    name:'累计用户数量',
                    type:'pie',
                    center: ['50%', '40%'],
                    radius: ['0%', '70%'],
                    data:[
                        {value:<?=isset($num['check'])?$num['check']:0?>, name: '认证用户',itemStyle: {color: '#2496EC'}},
                        {value:<?=isset($num['register'])?$num['register']:0?>, name:'注册用户',itemStyle: {color: '#AEDCAE'}},
                        {value:<?=isset($num['author'])?$num['author']:0?>, name:'授权用户',itemStyle: {color: '#F29895'}},
                    ],
                    label: {
                        normal: {
                                position: 'inner',
                                // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                formatter: '{per|{d}%}',
                                rich: {
                                    a: {
                                        color: '#000',
                                        // lineHeight: 1,
                                        align: 'center',
                                        fontSize: 12,
                                    },
                                    c: {
                                        color: '#000',
                                        fontSize: 12,
                                        lineHeight: 33
                                    },
                                
                                    b: {
                                        color: '#000',
                                        fontSize: 12,
                                        lineHeight: 33
                                    },
                                    
                                    per: {
                                        fontSize: 12,
                                        color: '#000',
                                        padding: [2, 4],
                                    }
                                }
                        }
                    }        
            }],
    
        };
        var Ssline1Option = {

            legend: {
                orient: 'horizontal',
                x: 'left',
                bottom: '20',
                left: '30%',
                // itemWidth: 20,
                // itemHeight: 10,
                // itemGap: 10,
                data:['机器用户量','通用二维码用户量']
                // data:[
                //     {
                //         name: '机器用户量',
                //         icon: 'rect'
                //     },
                //     {
                //         name: '通用二维码用户量',
                //         icon: 'circle'
                //     }
                // ],
            },
            
            tooltip : {
                trigger: 'item',
                formatter: '{a}<br/> {b} : {c} ({d}%)'
            },
    
            series: [{
                    name:'累计用户数量',
                    type:'pie',
                    center: ['50%', '40%'],
                    radius: ['0%', '60%'],
                    data:[
                        {value:<?=isset($num['machine'])?$num['machine']:0?>, name: '机器用户量',itemStyle: {color: '#2496EC'}},
                        {value:<?=isset($num['QRcode'])?$num['QRcode']:0?>, name:'通用二维码用户量',itemStyle: {color: '#AEDCAE'}},
                    ],
                   
                    label: {
                        normal: {
                                // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}\n{c} {per|{d}%}  ',
                                formatter: '{per|{d}%}  ',
                                position: 'inner',
                                rich: {
                                    a: {
                                        color: '#000',
                                        lineHeight: 18,
                                        align: 'center',
                                        fontSize: 12,
                                    },
                                    c: {
                                        color: '#000',
                                        fontSize: 12,
                                        lineHeight: 33
                                    },
                                
                                    b: {
                                        color: '#000',
                                        fontSize: 12,
                                        lineHeight: 33
                                    },
                                    
                                    per: {
                                        fontSize: 12,
                                        color: '#000',
                                        padding: [2, 10],
                                    }
                                }
                        }
                    }        
            }],
        };   
        var Ssline2Option = {
            legend: {
                orient: 'horizontal',
                x: 'left',
                bottom: '20',
                left: '25%',
                data:['认证用户','注册用户','授权用户']
            },
            tooltip : {
                trigger: 'item',
                formatter: '{a}<br/> {b} : {c} ({d}%)',
            },
            
            series: [{
                    name:'累计用户数量',
                    labelLine:{  
                        length: 30,
                        length2: 30,
                    },
                    type:'pie',
                    center: ['50%', '40%'],
                    radius: ['0%', '60%'],
                    data:[
                        {value:<?=isset($num['check'])?$num['check']:0?>, name: '认证用户',itemStyle: {color: '#2496EC'}},
                        {value:<?=isset($num['register'])?$num['register']:0?>, name:'注册用户',itemStyle: {color: '#AEDCAE'}},
                        {value:<?=isset($num['author'])?$num['author']:0?>, name:'授权用户',itemStyle: {color: '#F29895'}},
                    ],
                    label: {
                        normal: {
                                // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}\n{c} {per|{d}%}  ',
                                formatter: '{per|{d}%}  ',
                                position: 'inner',
                                rich: {
                                    a: {
                                        color: '#000',
                                        lineHeight: 18,
                                        align: 'center',
                                        fontSize: 12,
                                    },
                                    c: {
                                        color: '#000',
                                        fontSize: 12,
                                        lineHeight: 33
                                    },
                                
                                    b: {
                                        color: '#000',
                                        fontSize: 12,
                                        lineHeight: 33
                                    },
                                    
                                    per: {
                                        fontSize: 12,
                                        color: '#000',
                                        padding: [2, 10],
                                    }
                                }
                        }
                    }        
            }], 
        };  
        var Ssline3Option = {
            legend: {
                orient: 'horizontal',
                x: 'left',
                bottom: '20',
                left: '35%',
                data:['机器用户量','通用二维码用户量']
            },
            tooltip : {
                trigger: 'item',
                formatter: '{a}<br/> {b} : {c} ({d}%)',
                // formatter:  function(name){
                //         // var data = [
                //         //     {value:253, name: '累积用户数量',itemStyle: {color: '#2496EC'}},
                //         //     {value:163, name:'累积用户数量',itemStyle: {color: '#AEDCAE'}},
                //         // ];
                //         console.log(name)
                //         var total = 0;
                //         var target;
                //         for (var i = 0, l = name.data.length; i < l; i++) {
                //             total += name.data[i].value;
                //             if (data[i].name == name) {
                //             target = data[i].value;
                //             }
                //         }
                //         var arr = [
                //             '{a|'+((target/total)*100).toFixed(2)+'%}',
                //             '{b|'+name+'}',
                //         ]
                //         // return name + ' ' + ((target/total)*100).toFixed(2) + '%';
                //         return arr.join('\n')
                //     },
            },
        
            series: [{
                    name:'累计用户数量',
                    type:'pie',
                    center: ['50%', '40%'],
                    radius: ['0%', '60%'],
                    position: 'inner',
                    data:[
                        {value:<?=isset($num['machine'])?$num['machine']:0?>, name: '机器用户量',itemStyle: {color: '#2496EC'}},
                        {value:<?=isset($num['QRcode'])?$num['QRcode']:0?>, name:'通用二维码用户量',itemStyle: {color: '#AEDCAE'}},
                    ],
                    label: {
                        normal: {
                                // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                formatter: '{per|{d}%}  ',
                                rich: {
                                    a: {
                                        color: '#000',
                                        lineHeight: 1,
                                        align: 'center',
                                        fontSize: 14,
                                    },
                                    c: {
                                        color: '#000',
                                        fontSize: 14,
                                        lineHeight: 33
                                    },
                                
                                    b: {
                                        color: '#000',
                                        fontSize: 14,
                                        lineHeight: 33
                                    },
                                    
                                    per: {
                                        fontSize: 14,
                                        color: '#000',
                                        padding: [2, 4],
                                    }
                                }
                        }
                    }        
            }],
        
        };   
        var Ssline4Option = {
            legend: {
                orient: 'horizontal',
                x: 'left',
                bottom: '20',
                left: '35%',
                data:['认证用户','注册用户','授权用户']
            },
            tooltip : {
                trigger: 'item',
                formatter: '{a}<br/> {b} : {c} ({d}%)',
            },
        
            series: [{
                    name:'累计用户数量',
                    type:'pie',
                    center: ['50%', '40%'],
                    radius: ['0%', '60%'],
                    data:[
                        {value:<?=isset($num['check'])?$num['check']:0?>, name: '认证用户',itemStyle: {color: '#2496EC'}},
                        {value:<?=isset($num['register'])?$num['register']:0?>, name:'注册用户',itemStyle: {color: '#AEDCAE'}},
                        {value:<?=isset($num['author'])?$num['author']:0?>, name:'授权用户',itemStyle: {color: '#F29895'}},
                    ],
                    label: {
                        normal: {
                                // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                formatter: '{per|{d}%}',
                                position: 'inner',
                                rich: {
                                    a: {
                                        color: '#000',
                                        // lineHeight: 1,
                                        align: 'center',
                                        fontSize: 14,
                                    },
                                    c: {
                                        color: '#000',
                                        fontSize: 14,
                                        lineHeight: 33
                                    },
                                
                                    b: {
                                        color: '#000',
                                        fontSize: 14,
                                        lineHeight: 33
                                    },
                                    
                                    per: {
                                        fontSize: 14,
                                        color: '#000',
                                        padding: [2, 4],
                                    }
                                }
                        }
                    }        
            }],
        
        };
        window.onresize = function(){
            // console.log($(window).width())
            if($(window).width()<=1300){
                var sline1Chart = echarts.init(document.querySelector('.secharts-one'));
                sline1Chart.setOption(Csline1Option);

                var sline2Chart = echarts.init(document.querySelector('.secharts-two'));
                sline2Chart.setOption(Csline2Option);   
            } else {

                var sline1Chart = echarts.init(document.querySelector('.secharts-one'));
                sline1Chart.setOption(Csline3Option);

                var sline2Chart = echarts.init(document.querySelector('.secharts-two'));
                sline2Chart.setOption(Csline4Option);   
            }
            sline1Chart.resize();
            sline2Chart.resize();
        }
        if($(window).width()<=1300){

                var sline1Chart = echarts.init(document.querySelector('.secharts-one'));
                sline1Chart.setOption(Ssline1Option);   
                var sline2Chart = echarts.init(document.querySelector('.secharts-two'));
                sline2Chart.setOption(Ssline2Option);  

            } else {

                var sline1Chart = echarts.init(document.querySelector('.secharts-one'));
                sline1Chart.setOption(Ssline3Option);

                var sline2Chart = echarts.init(document.querySelector('.secharts-two'));
                sline2Chart.setOption(Ssline4Option);   
        }

        // select-options显示隐藏
        $('body').on('click', '.hw-select', function(e) {
            if ($(this).find('.hw-input').prop('disabled')) return;
            var selectOptions = $(this).find('.select-options');
            if (selectOptions.css('display') == 'none') {
                selectOptions.slideDown(100);
            } else {
                selectOptions.slideUp(100);
            }
        });

       $('.search').on("click",function(){
            var startTime = $('#startime').val();
            var endTime =  $('#endtime').val();
            var hotel = $('.ly-hotel').find('.selected').data('value');
            if(startTime==''||!startTime){
                $.alert('请选择起始时间');
                return false;
            }
            if(endTime==''||!endTime){
                $.alert('请选择截止时间');
                return false;
            }
            $.post('/Admin/Index/conversionCount',{date_start: startTime,date_end: endTime,hotel: hotel},function(info){
                info = JSON.parse(info)
                console.log(info);
                var User = info.user;
                var Author = info.author;
                var Check = info.check;
                if(User&&User!=''){
                    $('.zbox').find('.border-blue').width('500px');
                    $('.zbox span').html(User+'人');
                    $('.zboxone').find('.border-blue').width((Author/User)*500+'px');
                    $('.zboxtwo').find('.border-blue').width((Check/User)*500+'px');
                    $('.onebl').show().html(((Author/User)*100).toFixed(2)+'%');
                    $('.twobl').show().html(((Check/User)*100).toFixed(2)+'%');
                }   else {
                    $('.zbox').find('.border-blue').width('0px');
                    $('.zbox span').html(0+'人');
                    $('.zboxone').find('.border-blue').width(0);
                    $('.zboxtwo').find('.border-blue').width(0);
                    $('.onebl').hide().html(0+'%');
                    $('.twobl').hide().html(0+'%');
                }
              
                $('.zboxone span').html(Author+'人');
                $('.zboxtwo span').html(Check+'人');
                })
       })
    //机器自助办理入住用户量 user     机器授权用户量 author   机器认证用户量 check
    $('body').on('mousedown', '.ly-options .option', function() {
        $(this).siblings().removeClass('selected');
        $(this).addClass('selected');
        var val = $(this).data('value');
        $(this).parent().siblings('input').val($(this).data('value'));
        $(this).parent().siblings('.show-option').html($(this).find('span').text());
        $.post('/Admin/Index/getUserType',{userType: val},function(info){
            info = JSON.parse(info);
            console.log(info);
            Csline2Option.series[0].data[0].value = info.typeCheck;
            Csline2Option.series[0].data[1].value = info.typeRegister;
            Csline2Option.series[0].data[2].value = info.typeAuthor;

            Csline4Option.series[0].data[0].value = info.typeCheck;
            Csline4Option.series[0].data[1].value = info.typeRegister;
            Csline4Option.series[0].data[2].value = info.typeAuthor;
            console.log(Csline2Option.series);
            if($(window).width()<=1300){
                sline2Chart.setOption(Csline2Option); 
                sline2Chart.resize();
            }else {
               
                sline2Chart.setOption(Csline4Option); 
                sline2Chart.resize();
            }
           
           
        })
    });
    </script>


<script>
    $(window).resize(function() {
        myChart.resize();
    })
    var myChart = echarts.init(document.getElementById('distributChart'));
    var time = <?=isset($map['time'])?json_encode($map['time']):0?>;
    var cred = <?=isset($map['cred'])?json_encode($map['cred']):0?>;
    var register = <?=isset($map['register'])?json_encode($map['register']):0?>;
    var auth = <?=isset($map['auth'])?json_encode($map['auth']):0?>;
    var option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        padding: [50,50,50,50],
        legend: {
            data: ['认证入户', '注册用户', '授权用户'],
            top: "20",
        },
        color:['#2496ec','#aedcae','#f29895'],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: time,
        },
        yAxis: {
            type: 'value',

        },
        series: [{
                name: '认证入户',
                type: 'line',
                // symbol: 'circle',     //设定为实心点
                symbolSize:5,   //设定实心点的大小
                data: cred,
                itemStyle : {
                        normal : {
                            lineStyle:{
                                color:'#2496ec',
                                // width:"5"
                            }
                        } 
               }

            },
            {
                name: '注册用户',
                type: 'line',
                data: register,
                // symbol: 'circle',     //设定为实心点
                symbolSize:5,   //设定实心点的大小                
                itemStyle : {
                        normal : {
                            lineStyle:{
                                color:'#aedcae',
                                // width:"5"
                            }
                        } 
               }                
            },
            {
                name: '授权用户',
                type: 'line',
                data:  auth,
                // symbol: 'circle',     //设定为实心点
                symbolSize:5,   //设定实心点的大小                
                itemStyle : {
                        normal : {
                            lineStyle:{
                                color:'#f29895',
                                // width:"5"
                            }
                        } 
               }                
            }
        ]
    };
    myChart.setOption(option);
    /*会员趋势查询*/
    $(".echartsearch").click(function() {
        var date_start = $("#startmember").val();
        var date_end = $("#endmember").val();
        var hotel = $(".hotelselet").find(".selected").attr("data-value");
        if(!date_start){
            $.alert('请选择起始时间');
            return false
        }
        if(!date_end){
            $.alert('请选择结束时间');
            return false
        }        
        $.ajax({
            url: '/Admin/Index/getMap',
            type: 'post',
            data: { date_start: date_start, date_end: date_end, hotel: hotel },
            dataType: 'json',
            success: function(json) {
                if (json.code == 0) {
                    $.alert(json.msg);
                } else {
                    option.series[0].data = json.cred;
                    option.series[1].data = json.register;
                    option.series[2].data = json.auth;
                    option.xAxis.data = json.time
                    myChart.setOption(option)
                }
            },
            error: function(json) {
                $.alert('出错了');
            }
        })
    })
    /*会员增量统计查询*/
    $(".tableserach").click(function() {
        var date_start = $("#star_time").val();
        var date_end = $("#end_time").val();
        if(!date_start){
            $.alert('请选择起始时间');
            return false
        }
        if(!date_end){
            $.alert('请选择结束时间');
            return false
        }        
        $.ajax({
            url: '/Admin/Index/getTable',
            type: 'post',
            data: { date_start: date_start, date_end: date_end},
            dataType: 'json',
            success: function(json) {
                if (json.code == 0) {
                    $.alert(json.msg);
                } else {
                   var str=''
                   $(".memberrasietable").find('tr').remove();
                   for(var i in json){
                    str+="<tr><td>"+json[i].date+"</td><td>"+json[i].cred+"</td><td>"+json[i].total_cred+"</td><td>"+json[i].register+"</td><td>"+json[i].auth+"</td></tr>"
                   }
                   $(".memberrasietable").append(str)
                }
            },
            error: function(json) {
                $.alert('出错了');
            }
        })
    })

    
</script>
<script>

        $(function() {
        // 列表页表头筛选
        $('thead').find('.hover-content .list').click(function() {
            var val = $(this).data('value'),
                target = $(this).parents('ul').data('target');

            $(target).val(val).parents('form').submit();
        });
        $('.reset_form').on('click',function(){
            $('.filter-detail').find('input').val('')
        })
        // 隐藏modal
        $('body').on('click', '[data-dismiss="modal"]', function() {
            $(this).parents('.modal').addClass('hide');
            // $('.modal').modal('hide');
        });
        
        
        // 显示modal
        $('body').on('click', '[data-toggle="modal"]', function() {
            var target = $(this).data('target');
            $(target).removeClass('hide');
            // $('.modal').modal('hide');
        });

        // tab切换
        $('body').on('click', '[data-toggle="tab"]', function() {
            $(this).addClass('active').siblings('[data-toggle="tab"]').removeClass('active');
            var target = $(this).data('target');
            $(target).removeClass('hide').siblings('.tab').addClass('hide'); 
        });

        /* 更多筛选条件 */
        var filterDetail = $('.filter-detail');
        function toggleInputDisabeld () {
            if (filterDetail.css('display') == 'none') {
                filterDetail.find('input').prop('disabled', true);
                filterDetail.find('select').prop('disabled', true);
            } else {
                filterDetail.find('input').prop('disabled', false);
                filterDetail.find('select').prop('disabled', false);
            }
        }
        toggleInputDisabeld();
    
        $('body').on('click', '.filter-switch', function() {  
            $('.filter-detail').toggle();
            if ($('.filter-detail').css('display') == 'none') {
                $('.hw-down').removeClass('hide');
                $('.hw-up').addClass('hide');
            }else{
                $('.hw-down').addClass('hide');
                $('.hw-up').removeClass('hide');
            }
            setTimeout(function() {
                toggleInputDisabeld();
            }, 20);
        });

        // 重置
        $('body').on('click', '#reset-filter-btn', function() {
        $(this).parents('.filter-detail').find('input').val('');
        $(this).parents('.filter-detail').find('.show-option').text('');
        $(this).parents('.filter-detail').find('.option').removeClass('selected');
        });

        // 全选
        $('.check-all').on('change', function() {
            var check = $(this).prop('checked');
            $(this).parents('table').find('.check-one').prop('checked', check);
        });

        $('.check-one').on('change', function() {
            var table = $(this).parents('table'),
                checkAll = table.find('.check-all');

            if (table.find('.check-one:not(:checked)').length <= 0) {
                checkAll.prop('checked', true);
            } else {
                checkAll.prop('checked', false);
            }
        });



        // 选择option（使用click事件，如果点击按住的时间过长，会造成blur时间先于click事件触发）
        $('body').on('mousedown', '.ll-options .option', function() {
       
            $(this).siblings().removeClass('selected');
            $(this).addClass('selected');
            $(this).parent().siblings('input').val($(this).data('value'));
            $(this).parent().siblings('.show-option').html($(this).find('span').text());
        });

        // $('.hw-select .hw-input').on('change', function() {alert('sa')
        //     var val = this.value,
        //         selectElem = $(this).siblings('.select-options'),
        //         showOption = $(this).siblings('.show-option');

        //     selectElem.find('.option ').each(function(n, elem) {
        //         if ($(this).data('value') == val) {
        //             $(this).addClass('selected').siblings('.option').removeClass('selected');
        //             showOption.html($(this).find('span').text());
        //         }
        //     }) 
        // });



        // hw-select失去焦点， 隐藏slect-options
        $('body').on('blur', '.hw-select', function() {
            var selectOptions = $(this).find('.select-options');
            selectOptions.slideUp(100);
        });

        // 列表在鼠标移入之后显示的区域位置
        var clientH = window.screen.availHeight;
        $('.hover-th').on('mouseenter', function(e) {
            var top = e.clientY;

            // 240是css中设置的hover-content的高度
            if (clientH - top <= 240) {
                $(this).find('.hover-content').addClass('top-hover');
            } else {
                $(this).find('.hover-content').removeClass('top-hover');
            }
        });


        // 输入框输入长度限制， 显示当前输入数量
        var widthNumber = $('.width-number');
        widthNumber.find('input').on('input', function() {
            createMaxLengthShow.call(this);
        });
    
        widthNumber.find('textarea').on('input', function() {
            createMaxLengthShow.call(this);
        });

        widthNumber.find('input').triggerHandler('input');
        widthNumber.find('textarea').triggerHandler('input');

        function createMaxLengthShow() {
            var max = $(this).attr('maxLength') || 0,
                len = $(this).val().length,
                formControl = $(this).parent('.form-control'),
                span = formControl.find('.num-span');

                console.log(formControl.html())

            if (span.length) {
                span.text(len + '/' + max);
                return;
            }
            formControl.append('<span class="num-span">'+ len + '/' + max +'</span>');
        }
    });



    // 分页js
    $(function() {
        $('.table-page').on('change', '.select', function() {
            $(this).parents('form').submit();
        });

        var pageNum = $('#page-num'),
            pElem = pageNum.parents('.page'),
            max = pageNum.data('max') || 1,
            url = pageNum.data('url'),
            get = pageNum.data('get');

        // 翻页跳转
        pageNum.on('change', function() {
            var num = $(this).val(),
                elem = null,
                errorElem = null;

            if (num <= max) {
                location.href = url + '/' + num + get;
            }
        });

        $(document).bind('keydown', function(e) {
            // 回车事件
            if(event.keyCode == 13) {
                var num = pageNum.val();

                if (num && num <= max) {
                    location.href = url + '/' + num + get;
                }
                return false;
            }  
        });

        pageNum.on('input propertychange', function() {
            var num = +$(this).val();
            if (num < 1 || !/^[1-9]{1,}\d*$/.test(num)) {
                return $(this).val(1);
            }
            if (num > max) {
                return $(this).val(max);
            } 
        });
    });
</script>
</html>